<template>
  <div class="main">
    <div class="title">
      <div class="titleBlock"></div>
      <div class="titleText">订单详情</div>
    </div>
    <div class="search">
      <el-form :model="sizeForm" inline="true" size="large">
        <el-form-item>
          <el-col :span="11">
            <el-date-picker
              placeholder="请选择日期"
              v-model="sizeForm.date1"
              type="date"
              class="inp"
              format="YYYY-MM-DD"
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="sizeForm.name"
            class="ipt"
            placeholder="请输入病人姓名/卡号"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" class="search-btn"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        :header-cell-style="{ fontSize: '10px' }"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column property="consume_time" label="操作时间" width="160" />
        <el-table-column property="consume_num" label="订单号" width="190" />
        <el-table-column property="consume_name" label="患者姓名" width="80" />
        <el-table-column property="consume_zynum" label="住院号" width="80" />
        <el-table-column property="consume_source" label="来源" width="100" />
        <el-table-column property="consume_type" label="业务类型" width="120" />
        <el-table-column
          property="consume_all"
          label="收费项目合计"
          width="100"
        />
        <el-table-column
          property="consume_zftype"
          label="支付方式"
          width="120"
        />
        <el-table-column
          property="consume_money"
          label="支付金额"
          width="120"
        />
        <el-table-column property="consume_jftype" label="缴费状态" width="120">
          <template #default="scope">
            <el-tag
              class="ml-2"
              type="success"
              v-if="scope.row.consume_jftype == 1"
              >已缴费</el-tag
            >
            <el-tag
              class="ml-2"
              type="danger"
              v-if="scope.row.consume_jftype == 2"
              >未交费</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column width="80" label="操作">
          <el-icon color="#006eff" :size="23" @click="details"
            ><Tickets
          /></el-icon>
        </el-table-column>
      </el-table>

      <yema :count="count" @changePage="tiaozhuan"></yema>
    </div>
  </div>
</template>
<script>
import yema from "../../components/xj/yema.vue";
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { getCostmanges, selectCost, getAllMsg } from "../../utils/api/shouye";
import storege from "../../utils/storege";
export default {
  props: {},
  components: {
    [ElConfigProvider.name]: ElConfigProvider,
    yema,
  },
  setup() {
    const data = reactive({
      radio: 1,
      value: "",
      tableData: [],
      count: null,
      pages: 1,
    });
    function geshihua(value) {
      let guaTime = new Date(value);
      let year = guaTime.getFullYear(); //年
      let month = (guaTime.getMonth() + 1).toString().padStart(2, "0");
      let day = guaTime.getDate().toString().padStart(2, "0");
      let h = guaTime.getHours();
      h = h < 10 ? "0" + h : h;
      let m = guaTime.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = guaTime.getSeconds();
      s = s < 10 ? "0" + s : s;
      let timer = year + "/" + month + "/" + day + " " + h + ":" + m + ":" + s;
      return timer;
    }
    function getAll() {
      getCostmanges(data.pages).then((value) => {
        data.tableData = value.data.data;
        for (var i = 0; i < data.tableData.length; i++) {
          data.tableData[i].consume_time = geshihua(
            data.tableData[i].consume_time
          );
        }
        data.count = value.data.count[0].count;
      });
    }
    getAll();
    const tiaozhuan = (page) => {
      data.pages = page;
      getAll();
    };
    const sizeForm = reactive({
      name: "",
      date1: "",
    });
    const router = useRouter();
    const details = () => {
      router.push({ name: "costcontentPage" });
    };
    const onSubmit = () => {
      let time = new Date(sizeForm.date1);
      let year = time.getFullYear(); //年
      let month = (time.getMonth() + 1).toString().padStart(2, "0"); //月
      let day = time.getDate().toString().padStart(2, "0");
      let times = year + "-" + month + "-" + day;
      let values = sizeForm.name;
      let obj1 = {
        times,
        values,
        pages: data.pages,
      };
      if (obj1.times == "NaN-NaN-NaN") {
        obj1.times = null;
      }
      if (obj1.values == "") {
        obj1.values = null;
      }
      console.log(obj1.times);
      selectCost(obj1).then((value) => {
        data.tableData = value.data.data;
        for (var i = 0; i < data.tableData.length; i++) {
          data.tableData[i].consume_time = geshihua(
            data.tableData[i].consume_time
          );
        }
        data.count = value.data.count[0].count;
      });
    };
    function getAllMessage() {
      getAllMsg().then((value) => {
        storege.setStorage("Alldata", value);
      });
    }
    getAllMessage();
    return { ...toRefs(data), details, onSubmit, sizeForm, tiaozhuan };
  },
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 30px;
  box-sizing: border-box;
  .titleBlock {
    width: 50px;
    height: 13px;
    background-color: #006eff;
    border-radius: 20px;
  }
  .titleText {
    font-size: 30px;
    margin-left: 20px;
  }
}
.table {
  padding: 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 1px 1px 5px 1px rgba(194, 188, 188, 0.486);
  .tableHeader {
    margin-bottom: 20px;
  }
  .tableFooter {
    border: 1px solid red;
    padding: 30px;
    box-sizing: border-box;
    margin-top: 20px;
  }
}
.inp {
  width: 150px;
}
.ipt {
  width: 260px;
}
.search-btn {
  width: 100px;
}
.search {
  background: white;
  height: 100px;
  box-sizing: border-box;
  padding-top: 20px;
  padding-left: 20px;
}
</style>